<div class="bd-content">
    <h1 class="bd-title" id="content">嵌入功能</h1>
    <p class="bd-lead">通过创建可在任何设备上缩放的固有比率，根据父级的宽度嵌入响应式视频或幻灯片.</p>
    <h2 id="about">关于</h2>

    <p>将这些规则直接应用到 <code class="highlighter-rouge">&lt;iframe&gt;</code>, <code class="highlighter-rouge">&lt;embed&gt;</code>, <code class="highlighter-rouge">&lt;video&gt;</code>, and <code class="highlighter-rouge">&lt;object&gt;</code> 元素；当需要这些样式对应属性时可加入 <code class="highlighter-rouge">.embed-responsive-item</code>。</p>

    <p><strong>小技巧</strong> 你不需要将 <code class="highlighter-rouge">frameborder="0"</code> 加在你的 <code class="highlighter-rouge">&lt;iframe&gt;</code>中，因为我们已经为你覆盖了该属性。</p>

    <h2 id="example">实例</h2>

    <p>在 <code class="highlighter-rouge">&lt;iframe&gt;</code> 的父元素使用 <code class="highlighter-rouge">.embed-responsive</code> 以加入响应式设计。请注意，<code class="highlighter-rouge">&lt;iframe&gt;</code> 中的 <code class="highlighter-rouge">.embed-responsive-item</code> 并非必须，但我们建议采用它。</p>

    <div class="bd-example">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
        </div>
    </div>
    <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-16by9"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/zpOULjyy-n8?rel=0"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

    <h2 id="aspect-ratios">宽高比</h2>

    <p>可以使用修饰符类自定义宽高比。</p>

    <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- 21:9 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-21by9"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- 16:9 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-16by9"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- 4:3 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-4by3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- 1:1 aspect ratio --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-1by1"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;&lt;/iframe&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</div>
